{% include "header.html" %}

<!-- Page Header-->
<header
  class="masthead"
  style="background-image: url('../static/assets/img/home-bg.jpg')"
>
  <div class="container position-relative px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
      <div class="col-md-10 col-lg-8 col-xl-7">
        <div class="site-heading">
          <h1>Clean Blog</h1>
          <span class="subheading">A Blog Theme by Start Bootstrap</span>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
  <div class="row gx-4 gx-lg-5 justify-content-center">
    <div class="col-md-10 col-lg-8 col-xl-7">
      <!-- Post preview-->
      {% for post in all_posts %}
      <div class="post-preview">
        <a href="{{ url_for('show_post', post_id=post.id) }}">
          <h2 class="post-title">{{ post.title }}</h2>
          <h3 class="post-subtitle">{{ post.subtitle }}</h3>
        </a>
        <p class="post-meta">
          Posted by
          <a href="#" style="pointer-events: none">{{post.author}}</a>
          on {{post.date}}
        <a href="{{url_for('delete_post', post_id=post.id)}}" style="color: red;" style="color: red;">✘</a>
        </p>
      </div>
      <!-- Divider-->
      <hr class="my-4" />
      {% endfor %}

      <!-- New Post -->
      <div class="d-flex justify-content-end mb-4">
        <a
          class="btn btn-primary float-right"
          href="{{url_for('add_new_post')}}"
          >Create New Post</a
        >
      </div>

      <!-- Pager-->
      <div class="d-flex justify-content-end mb-4">
        <a class="btn btn-secondary text-uppercase" href="#!">Older Posts →</a>
      </div>
    </div>
  </div>
</div>

{% include "footer.html" %}